<template>
  <div class="advert">
    <el-form>
      <el-form-item>
        <el-button @click="$router.push({
          name: 'create-advert'
        })">添加广告</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="adList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="广告名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="spaceId"
        label="广告位置">
        <template slot-scope="scope">
          <span>{{ scope.row.spaceId | transformSpaceIdToContent }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="img"
        label="广告图片"
        width="180">
        <template slot-scope="scope">
          <img style="width: 100%; height: 100px;" :src="scope.row.img" alt="">
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        width="240">
        <template slot-scope="scope">
          <p>开始时间：{{ scope.row.createTime }}</p>
          <p>到期时间：{{ scope.row.updateTime }} </p>
        </template>
      </el-table-column>
      <el-table-column
        pros="status"
        label="上线/下线"
        width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="openOrCloseAd(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="80">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import moment from 'moment'
import { getAdList, getAllInfo, updateAdStatus } from '@/services/advertise'

let spaceInfo: any[] = []

export default Vue.extend({
  name: 'AdvertIndex',
  data () {
    return {
      adList: []
    }
  },
  async created () {
    await this.loadAdInfo()
    this.loadAdList()
  },
  methods: {
    async loadAdInfo () {
      const { data } = await getAllInfo()
      spaceInfo = data.content
    },
    async loadAdList () {
      const { data } = await getAdList({})
      this.adList = data.content.map((ad: any) => {
        ad.createTime = moment(ad.createTime).format('YYYY-MM-DD HH:mm:SS')
        ad.updateTime = moment(ad.updateTime).format('YYYY-MM-DD HH:mm:SS')
        return ad
      })
    },
    handleEdit (ad: any) {
      this.$router.push({
        name: 'update-advert',
        params: {
          adId: ad.id
        }
      })
    },
    openOrCloseAd (ad: any) {
      this.$confirm('是否要修改上线/下线状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.updateAdStatus(ad)
        this.$message.success('操作成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      }).finally(() => {
        this.loadAdList()
      })
    },
    async updateAdStatus (ad: any) {
      await updateAdStatus({
        id: ad.id,
        status: ad.status
      })
    }
  },
  filters: {
    transformSpaceIdToContent: (spaceId: string | number) => {
      const idx: number = spaceInfo.findIndex((item: any) => {
        return item.id === spaceId
      })
      return spaceInfo[idx] && (spaceInfo[idx] as any).name
    }
  }
})
</script>

<style lang="scss" scoped></style>
